<template>
        <div class="customVueNode">
            <img :src="state.data.image" alt="" class="icon">
            <div class="right">
                <div class="name">{{state.data.label}}</div>
            </div>
            <div class="tool">
                <el-button type="primary" size="small" @click="toExchange">{{computedText}}</el-button>
                <div></div>
                <el-switch v-model="state.data.open" :active-value="true" :inactive-value="false" @change="dataChange">
                </el-switch>
            </div>
        </div>
</template>

<script setup>
import { computed, inject, onMounted, reactive } from 'vue'
import { useExchangeData } from '../pinia/pinia'
const exchangeData = useExchangeData();
const toExchange = () => {
    if(!exchangeData.data.some(item => item.id === state.data.id)) {
        exchangeData.data.push(state.node)
    }
}
const computedText = computed(() => {
    return !exchangeData.data.length ? '选择': exchangeData.data.some(item => item.id === state.node.id) ? '已选' : '交换'
})
const getNode = inject('getNode')
const changeData = inject('changeData')
const dataChange = () => {
    changeData(state.data,state.node)
}
const state = reactive({
    data: { open: false },
    node: null
})
onMounted(() => {
    const node = getNode()
    state.node = node;
    state.data = {
        open: false,
        ...node.data,
    }
    node.on('change:data', ({current}) => {
        console.log('change',current.open)
     state.data = {
         open: false,
        ...current,
     }
    })
})
</script>

<style lang='scss'>
.customVueNode {
    // border: 1px solid #5F9500;
    // background-color: #5F95F0;
    padding: 0 10px;
    height: 100%;
    box-sizing: border-box;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    position: relative;
    .tool {
        position: absolute;
        right: -50px;
        top: 0;
    }
     $s: 25px;
    .icon {
        width: $s;
        height: $s;
        display: block;
        margin: 0 auto;
        object-fit: cover;
    }
    .name {
        font-size: 12px;
        font-weight: 600;
        color: #333;
        white-space: nowrap;
    }
}
</style>